<template>
    <!-- company子路由 name 1 -->
    <div>
        <div class="imfromation">
            <el-table style="width: 100%; margin-left: 15px;" :default-sort="{ prop: 'date', order: 'descending' }"
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))">
                <el-table-column prop="number" label="序号" sortable width="180">
                </el-table-column>
                <el-table-column prop="land_name" label="登陆名" sortable width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="user_type" label="用户类型">
                </el-table-column>
                <el-table-column prop="user_role" label="用户角色">
                </el-table-column>
                <el-table-column prop="department" label="所属机构">
                </el-table-column>
                <el-table-column prop="phone" label="手机">
                </el-table-column>
                <el-table-column align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input v-model="search" size="mini" placeholder="输入名字搜索" />
                    </template>
                    <template slot-scope="scope">
                        <el-button type="success" plain size="mini" @click="handleEdit(scope.$index, scope.row)">修改手机
                        </el-button>
                        <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete
                        </el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block" style="text-align:center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination>
        </div>
        <el-empty description="描述文字"></el-empty>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentPage: 4,
            tableData: [{
                number: 1,
                land_name: '13958316764',
                name: '2016-王小虎-02',
                user_type: '服务机构',
                user_role: '服务机构-服务机构专家',
                department: '宁波安环健企业管理咨询有限公司',
                phone: '13958316764',
            }, {
                number: 1,
                land_name: '13958316764',
                name: '王小虎',
                user_type: '服务机构',
                user_role: '服务机构-服务机构专家',
                department: '宁波安环健企业管理咨询有限公司',
                phone: '13958316764',
            }, {
                number: 1,
                land_name: '13958316764',
                name: '王小虎',
                user_type: '服务机构',
                user_role: '服务机构-服务机构专家',
                department: '宁波安环健企业管理咨询有限公司',
                phone: '13958316764',
            }, {
                number: 1,
                land_name: '13958316764',
                name: '王大虎',
                user_type: '服务中心',
                user_role: '服务机构-服务机构专家',
                department: '宁波安环健企业管理咨询有限公司',
                phone: '13958316764',
            }],
            search: ''
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleEdit() {
            this.$alert('是否修改号码', '编辑内容', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'info',
                        message: `action: ${action}`
                    });
                }
            });

        },
        formatter(row, column) {
            return row.address;
        }
    },
    computed: {
    },
    mounted() {
    }
}
</script>
<style>
</style>